<style lang="less">
@import "./home.less";
@import "../../styles/common.less";
</style>
<template>
  <div style=" background-color: #fff;!important;">
    <div class="inner">
      <div class="home-itle">今日数据</div>
      <div class="home" style="margin-top: 10px">
        <Row :gutter="10">
          <Col :lg="24" :xl="24" style="margin-bottom: 10px">
            <div class="Cardbox" style="height: 285px;!important;">
              <div style="display: flex">
                <div style="margin-top:9px; !important; width: 49.5%; ">
                  <cardProgress v-if="statistics" :count="count">
                  </cardProgress>
                </div>
                <div
                  style="margin-top:10px; !important; width: 49.5%;margin-left:1%;"
                >
                  <cardLine
                    :homeDataTotalDays="homeDataTotalDays"
                    :homeDataTotalGoods="homeDataTotalGoods"
                    :count="count"
                    v-if="statistics"
                  >
                  </cardLine>
                </div>
                <div
                  style="margin-top:10px; !important; width: 49.5%;margin-left:1%;"
                >
                  <cardArea
                    v-if="statistics"
                    :homeDataTotalDays="homeDataTotalDays"
                    :homeDataTotalOrder="homeDataTotalOrder"
                    :count="count"
                  >
                  </cardArea>
                </div>
                <div
                  style="margin-top:10px; !important; width: 49.5%;margin-left:1%;"
                >
                  <cardAreaFill
                    v-if="statistics"
                    :homeDataTotalDays="homeDataTotalDays"
                    :homeDataTotalEntrusted="homeDataTotalEntrusted"
                    :count="count"
                  >
                  </cardAreaFill>
                </div>
              </div>
            </div>
          </Col>
        </Row>
        <Row :gutter="10">
          <Col :lg="24" :xl="24" style="margin-bottom: 10px">
            <div>
              <div class="boot-itle">累计数据</div>
              <div style="display: flex">
                <div style="margin-top:10px; !important; width: 49.5%;">
                  <Card class="card-progress-count-plaltf">
                    <div class="card-header">
                      <span>货主数量</span>
                    </div>
                    <div class="value">
                      <span>
                        {{ count.totalCompanyNum }}
                      </span>
                    </div>
                  </Card>
                </div>
                <div
                  style="margin-top:10px; !important; width: 49.5%;margin-left:1%;"
                >
                  <Card class="card-progress-count-plaltf">
                    <div class="card-header">
                      <span>驾驶员数量</span>
                    </div>
                    <div class="value">
                      <span>
                        {{ count.totalDriversNum }}
                      </span>
                    </div>
                  </Card>
                </div>
                <div
                  style="margin-top:10px; !important; width: 49.5%;margin-left:1%;"
                >
                  <Card class="card-progress-count-plaltf">
                    <div class="card-header">
                      <span>累计发布货源</span>
                    </div>
                    <div class="value">
                      <span>
                        {{  count.totalGoodsNum }}
                      </span>
                    </div>
                  </Card>
                </div>
                <div
                  style="margin-top:10px; !important; width: 49.5%;margin-left:1%;"
                >
                  <Card class="card-progress-count-plaltf">
                    <div class="card-header">
                      <span>APP累计日活</span>
                    </div>
                    <div class="value">
                      <span>
                        {{  count.totalDailyLivingNum }}
                      </span>
                    </div>
                  </Card>
                </div>
              </div>
            </div>
          </Col>
        </Row>
      </div>
    </div>

    <!-- 消息 -->
    <platformNews
      v-if="newsShow"
      @newsEnd="newsEnd"
      :newsData="newsData"
      :newNews="this.newNews"
    >
    </platformNews>
    <!--  -->
  </div>
</template>

<script>
// 资讯投诉
import {
  ipInfo,
  getNotice,
  userStatistics,
  pendingUser,
  getMsgComplaintList,
} from "@/api/index";
// 订单列表
import { getOrderOrderList } from "@/api/order";
import {
  getGoodsOrderSum,
  pcHomePageStatistics,
  pcHomePageTotal,
  getNewMessageNotice,
  getNewMessageSend,
  pcHomeShipperList, //首页 获取托运人列表
  pcHomeCarrierList, //首页 获取承运人列表
  pcHomeReconciliation, //首页 首页 对账 业务数据 统计
} from "@/api/home";

import { CountUp } from "countup.js";
import cardProgress from "./platformHomEcharts/cardProgress1.vue";
import cardLine from "./platformHomEcharts/cardLine2.vue";
import cardArea from "./platformHomEcharts/cardArea3.vue";
import cardAreaFill from "./platformHomEcharts/cardAreaFill4.vue";
import activityR from "./platformHomEcharts/activityR.vue";

import visitVolume from "./components/visitVolume.vue";
import visitSeparation from "./components/visitSeparation.vue";
import infoCard from "./components/infoCard.vue";
import { getStore, setStore } from "@/libs/storage";
// import Cookies from "js-cookie";
import cardInfo from "./cardInfo.vue";
import platformNews from "@/views/componentsonn_source_goods/platformNews";
import testMap from "@/views/componentsonn_source_goods/testMap";
export default {
  name: "home",
  components: {
    visitVolume,
    visitSeparation,
    infoCard,
    cardInfo,
    //
    cardProgress,
    cardLine,
    cardArea,
    cardAreaFill,
    activityR,
    platformNews,
    testMap,
  },
  data() {
    return {
      formDtata: {
        shipper: "00000001",
        actualCarrier: 1,
      },
      shipperList: [],
      actualCarrierList: [
        { userId: 2, userName: "托运人" },
        { userId: 1, userName: "实际承运人" },
      ],
      icons: {
        icon1: require("@/assets/heom/待接单.png"),
        icon2: require("@/assets/heom/待审核.png"),
        icon3: require("@/assets/heom/待装货.png"),
        icon4: require("@/assets/heom/货主数.png"),
        icon5: require("@/assets/heom/驾驶员数.png"),
        icon6: require("@/assets/heom/新增数.png"),
        icon7: require("@/assets/heom/用户总量.png"),
        icon8: require("@/assets/heom/运输中.png"),
      },
      refresh: true,
      value: 1,
      //数据
      data_zixun: [],
      data_yonghu: [],
      data_withdrawal: [],
      data_dingdan: [],
      showVideo: false,
      menuNum: {}, //签约数、货源数等
      count: {
        //用户、驾驶员、货主等
        totalUserNum: 0,
        driversNum: 0,
        companyNum: 0,
        todayNewUserNum: 0,
      },
      searchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
      },
      city: "",
      username: "",
      header: {
        accessToken: getStore("accessToken"),
      },
      accessToken: getStore("accessToken"),
      //  业务数据 统计
      homeDataStatistics: {},
      //   获取平台最新一条公告
      messageNotice: {},
      //  货源、订单、运单总统计
      homeDataTotal: [],
      homeDataTotalDays: [],
      homeDataTotalEntrusted: [],
      homeDataTotalGoods: [],
      homeDataTotalOrder: [],
      statistics: true,

      newNews: false, //新消息
      newsData: {},
    };
  },
  computed: {
    currNav() {
      return this.$store.state.app.currNav;
    },
    avatarPath() {
      let url = "";
      if (localStorage.avatorImgPath.length < 8) {
        url =
          this.$baseUrl +
          "/freight/file/view/" +
          localStorage.avatorImgPath +
          "?accessToken=" +
          this.accessToken +
          "&preview=true";
      } else {
        url = localStorage.avatorImgPath;
      }

      return url;
    },
  },
  methods: {
    handleReset() {
      this.formDtata.shipper = "00000001";
      this.formDtata.actualCarrier = 1;
    },
    showNotice() {
      getNotice().then((res) => {
        if (res.success) {
          if (!res.result) {
            return;
          }
          let data = res.result;
          if (
            data.open &&
            (data.title || data.content) &&
            data.position == "HOME"
          ) {
            this.$Notice.info({
              title: data.title,
              desc: data.content,
              duration: data.duration,
            });
          }
        }
      });
    },
    rollData(data) {
      let obj = JSON.parse(data);
      let arr = [];
      for (let key in obj) {
        arr.push({
          label: key,
          val: obj[key],
        });
      }
      var options = {
        decimalPlaces: 2,
      };
      arr.forEach((item) => {
        if (
          item.label == "staySettlementMoney" ||
          item.label == "progressSettlementMoney" ||
          item.label == "alreadySettlementMoney" ||
          item.label == "stayBillMoney" ||
          item.label == "progressBillMoney" ||
          item.label == "alreadyBillMoney" ||
          item.label == "stayInvoiceMoney" ||
          item.label == "toexamineInvoiceMoney" ||
          item.label == "progressInvoiceMoney" ||
          item.label == "alreadyInvoiceMoney"
        ) {
          item.val = this.munber(item.val);
          new CountUp(item.label, item.val, options).start();
        } else {
          new CountUp(item.label, item.val).start();
        }
      });
    },
    munber(val) {
      val = Number(val);
      let num = 0;
      if (val == 0) {
      } else {
        num = val / 10000;
      }
      if (num > 0.000001) {
        num.toFixed(2);
      } else {
        num = 0;
      }
      return num.toFixed(2);
    },
  },
  created() {
  },

  mounted() {
    // 菜单数量
    userStatistics().then((res) => {
      if (res.success) {
        this.count = res.result;
        this.refresh = false;
        this.$nextTick(() => {
          this.refresh = true;
        });
      }
    });
    let loginRole = JSON.parse(localStorage.getItem("userInfo"));
    // this.init();
    // 通知
    let noticeFlag = "noticeShowed";
    let notice = Cookies.get(noticeFlag);
    if (notice != noticeFlag) {
      this.showNotice();
      Cookies.set(noticeFlag, noticeFlag);
    }
  },
};
</script>

<style  lang="less">
.home-itle {
  margin-top: 5%;
  font-size: 25px;
  font-weight: 600;
}
.boot-itle {
  font-size: 25px;
  font-weight: 600;
}
.card-progress-count-plaltf {
  height: 170px;
  .card-header {
    display: flex;
    height: 22px;
    align-items: center;
    justify-content: space-between;
    // color: rgba(0, 0, 0, 0.45);
    font-size: 16px;
    margin: 15px 0;
  }
  .value {
    height: 38px;
    margin-top: 4px;
    margin-bottom: 6px;
    overflow: hidden;
    
    font-size: 30px;
    line-height: 38px;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    span{
      color: #FFCC66;
    }
  }
}

//
.listItem {
  padding: 5px 0 15px 0;
  font-size: 16px;
  border-bottom: 1px #333 dotted;
}
.commentsItem {
  font-size: 14px;
}
.AlertcommentsItem {
  font-size: 14px;
  margin: 2px 0;
}

.commentsBox {
  margin-bottom: 7px;

  .ivu-card {
    .ivu-card-body {
      padding: 6px 16px !important;
    }
  }
}
.Cardbox {
  .ivu-card {
    .ivu-card-body {
      padding-top: 7px !important;
    }
  }
}
.head {
  height: 50px;
  background-color: #fff;

  // background-image: linear-gradient(-128deg, 	#3C82FF, 	#1EBFFF);
}
.newscss {
  width: 50px;
  background-color: #fff;
  height: 48px;
  img {
    width: 35px;
    height: 35px;
    margin-left: 14px;
    margin-top: 6px;
  }
}
.dataPreview {
  margin-top: 18px;
  background: #fff;
  // padding: 14px 0;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
  .basicInformation {
    width: 32px !important;
    padding: 15px 8px;
    text-align: center;
    background: #e0e0eb;
    font-size: 16px;
    color: #fff;
    line-height: 22px;
    margin-right: 6px;
    font-weight: 600;
  }
  .viedt {
    padding: 18px 10px 15px 26px;
    font-size: 18px;
    color: #39394d;
    font-weight: 700;
  }
}
.marqueeText {
  width: 95%;
  margin-left: 10px;
  line-height: 50px;
}
// color: #111113;
// cursor: pointer;
.div-left {
  height: 35px;
  line-height: 35px;
}
.but-left {
  margin-left: -10px;
  background-color: #19be6b !important;
  color: #fff !important;
  border: 0 !important;
}
.div-width {
  height: 120px;
  background: #f7f7fb;
  padding: 0 25px;
  padding-top: 8px !important;
}
.text-font {
  font-size: 18px;
  color: #39394d;
  font-weight: 600;
}
.div-display-flex {
  display: flex;
  justify-content: space-between;
}
.div-little {
  font-size: 12px;
  color: #84849a;
  margin-left: 22px;
  font-weight: 400;
}
.num-color {
  margin-top: 4px;
  font-size: 24px;
  color: #39394d;
  font-weight: bold;
}
.num-color-tow {
  font-size: 24px;
  color: #84849a;
  cursor: default;
}
.itle-div-width {
  width: 100px;
}

.itie_num {
  width: 100px;
  font-size: 14px;
  color: #39394d;
  white-space: nowrap;
  margin-left: 50px;
}

.bottom-div {
  font-size: 14px;
  color: #39394d;
  white-space: nowrap;
}

.Modalcss {
  .ivu-modal-header {
    border-bottom: 0px !important;
  }
  .ivu-modal-footer {
    border-top: 0px !important;
  }
  .ivu-modal-header-inner {
    font-size: 16px !important;
    font-weight: 600 !important;
  }
}
.driverList {
  color: #333;
  font-size: 16px;
  font-weight: 500;
}
.listMomoney {
  margin-left: 15px;
  font-weight: 600;
}
.copys {
  margin-left: 15px;
  cursor: pointer;
  color: #19be6b;
}
.Modalcss {
  .ivu-modal-header {
    border-bottom: 0px !important;
  }
  .ivu-modal-footer {
    border-top: 0px !important;
  }
  .ivu-modal-header-inner {
    font-size: 16px !important;
    font-weight: 600 !important;
  }
}
.but-left {
  margin-left: -10px;
  background-color: #19be6b !important;
  color: #fff !important;
  border: 0 !important;
}
.owerName {
  width: 100px;
  font-size: 16px;
  // font-weight: 600;
  color: #84849a;
  // margin-left: -50px;
}
.owerNumk {
  font-size: 24px;
  color: #84849a;
  cursor: default;
  width: 76px;
}
.owerNum {
  font-size: 24px;
  color: #84849a;
  cursor: default;
  width: 73px;
  // margin-left:30%;
}
.owerNum1 {
  font-size: 24px;
  color: #84849a;
  cursor: default;
  width: 100px;
  // margin-left: 51px;
}
.itietext {
  width: 100px;
  font-size: 14px;
  color: #39394d;
  white-space: nowrap;
  margin-left: 45px;
}
.ss-css {
  margin-top: 15px;
  margin-left: -11px;
}
</style>